<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    :default-active="$route.path"
    text-color="#fff"
    :router="true"
    @open="handleOpen"
    @close="handleClose"
  >
    <MenuItem v-for="item in routes" :key="item.path" :route="item" />
    <div @click="isCollapse = !isCollapse" class="toggle">
      <el-icon :size="20" color="#409EFC"><fold /></el-icon>
    </div>
  </el-menu>
</template>

<script>
import MenuItem from "./MenuItem.vue";
import { Fold } from "@element-plus/icons";
import { routes } from "@/router";
export default {
  components: {
    MenuItem,
    Fold,
  },
  data() {
    let isCollapse = false;
    return {
      routes: routes,
      isCollapse,
    };
  },
  methods: {
    handleOpen: () => {
      // console.log(key, keyPath);
    },
    handleClose: () => {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss">
.el-menu {
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  max-height: calc(100vh - 80px);
}
.el-menu--collapse {
  max-height: calc(100vh - 80px);
}
/*隐藏文字*/
.el-menu--collapse .el-sub-menu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}
/*解决图标错位 */
.el-sub-menu__title {
  padding: 0 !important;
  padding-left: 20px !important; 
}
.toggle {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: dimgray;
}
</style>
